body { 
  font: 13px/1.5 sans-serif;
  margin: 4em 10em 2em 4em;
  color: #AAA;
}

body:hover #content { color: #555; }
body:hover #sidebar { color: #777; }

h1,h2 {
  margin-top: 0;
}

#content {
  -moz-border-radius: 8px;
  border: 1px solid #BBB;
  padding: 1em;
  min-height: 6em;
}

#sidebar {
  background: #f4f8f9;
  border: 1px solid #BBB;
  margin: 2em 0;
  padding: 1em;
  -moz-border-radius: 8px;
}

#inputDevice {
  width: 80%;
  background: transparent;
  color: black;
  border: 0;
  padding: 0.9em 0;
  height: 1.2em;
  line-height: 1.2em;
}

#taskInputContainer {
  background: #f4f8f9 url(add.png) 1.5em center no-repeat;
  border-bottom: 1px dashed #CCC;
  font-size: 13px;
  line-height: 3em;
  height: 3em;
  padding-left: 3em;
  visibility: hidden;
}

body:hover
#taskInputContainer {
  visibility: visible;
}

div.task {
  line-height: 3em;
  background-image: url(bullet-off.png);
  background-position: 1.5em center;
  background-repeat: no-repeat;
  padding: 0 1em 0 3em;
  border-bottom: 1px dashed #E0E0E0;
}

body:hover div.task {
  background-image: url(bullet.png);
}

.due-span {
  color: grey;
  font-size: 0.9em;
  background-color: #f4f8f9;
  border: 1px solid #DFDFDF;
  -moz-border-radius: 3px;
  padding: 0.1em 0.3em;
}

.actions {
  float: right;
/*  margin-top: -3em; */
}

.actions A {
  text-transform: uppercase;
  font-size: 0.7em;
  padding-top: 3px;
  padding-bottom: 3px;
  color: gray;
  text-decoration: none;
}

.task-delete, .task-complete, .task-postpone {
  padding-left: 18px;
  background-repeat: no-repeat;
  background-position: left center;
}

.task-delete   { background-image: url(delete.png); }
.task-complete { background-image: url(complete.png); }
.task-postpone { background-image: url(postpone.png); }

.task-complete:hover, .task-postpone:hover { color: #555; }
.task-delete:hover { color: red; }


.hover {
  background-color: #f4f8f9;
}